<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1,#box2,#box3{
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			
		</div>
		<div id="box2">
			
		</div>
		<div id="box3">
			
		</div>
		<script type="text/javascript">
//			var obox = document.getElementById("box1")
//			obox.onclick = function fn () {
//				if (obox.style.backgroundColor = "blue") {
//					obox.style.backgroundColor = "red"
//				} else{
//					obox.style.backgroundColor = "blue"
//				}
////				obox.style.backgroundColor = "blue"
//			}
//			function fn1 (n) {
//				console.log(n)
//			}
//			function fn2 () {
//				alert(2)
//			}
//			fn1(fn2)
			//
			function changeColor (name) {
				var obox = document.getElementById(name)
				console.log(obox)
				obox.onclick = function () {
				if (obox.style.backgroundColor == "blue") {
					obox.style.backgroundColor = "red"
					console.log("red")
				} else{
					obox.style.backgroundColor = "blue"
					console.log("blue")
				}
			}
			}
			changeColor("box1")
			changeColor("box2")
			changeColor("box3")
		</script>
	</body>
</html>
